<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
            border: 1px solid #ccc;
            padding: 30px;
            box-shadow: 0px 0px 5px 0px #000;
            width: 200px;
        }
        
        li img {
            width: 200px;
            height: 100px;
        }
        
        span {
            color: red;
        }
        
        h3 {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <button id="btn1">按价格排序</button>
    <button id="btn2">按销量排序</button>
    <button id="btn3">按评论排序</button>

    <ul id="list">
    </ul>
    <script>
        //    创建对象
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];

        // 按价格排序
        var t = data.sort(function(a, b) {
                return b.sale - a.sale
            })
            // 按销量排序
        var s = data.sort(function(a, b) {
                return b.evaluate - a.evaluate
            })
            // 按评价排序
        var a = data.sort(function(a, b) {
            return b.sales - a.sales
        })

        // 使用for循环来给每个元素添加属性和属性值
        for (var i = 0; i < data.length; i++) {
            list.innerHTML += '<li>' +
                '<img src="' + data[i].imgurl + '">' +
                "<h2>机型：" + data[i].name + "</h2>" +
                "<h3>原价：" + data[i].price + '</h3>' +
                "<span>现价：￥" + data[i].sale + "</span>" +
                "<p>颜色：" + data[i].color + "</p>" +
                "<p>销量：" + data[i].evaluate + "</p>" +
                "<p>评价：" + data[i].sales + "</p>" +
                '</li>';

        }

        // 给按钮价格排序添加点击事件
        btn1.onclick = function() {


                list.innerHTML = "";
                var t = data.sort(function(a, b) {
                    return b.evaluate - a.evaluate
                })

                for (var j = 0; j < t.length; j++) {
                    list.innerHTML += '<li>' +
                        '<img src=' + data[j].imgurl + ">" +
                        "<h2>机型：" + data[j].name + "</h2>" +
                        "<h3>原价：" + data[j].price + '</h3>' +
                        "<span>现价：￥" + data[j].sale + "</span>" +
                        "<p>颜色：" + data[j].color + "</p>" +
                        "<p>销量：" + data[j].evaluate + "</p>" +
                        "<p>评价：" + data[j].sales + "</p>" +
                        '</li>';

                }

            }
            // 给按钮销量排序添加点击事件
        btn2.onclick = function() {


            var s = data.sort(function(a, b) {
                return b.evaluate - a.evaluate
            })

            for (var j = 0; j < s.length; j++) {
                list.innerHTML += '<li>' +
                    '<img src=' + data[j].imgurl + ">" +
                    "<h2>机型：" + data[j].name + "</h2>" +
                    "<h3>原价：" + data[j].price + '</h3>' +
                    "<span>现价：￥" + data[j].sale + "</span>" +
                    "<p>颜色：" + data[j].color + "</p>" +
                    "<p>销量：" + data[j].evaluate + "</p>" +
                    "<p>评价：" + data[j].sales + "</p>" +
                    '</li>';

            }

        }
        btn3.onclick = function() {

            // 把ul字符串清空
            list.innerHTML = "";
            var a = data.sort(function(a, b) {
                return b.sales - a.sales
            })
            for (var j = 0; j < a.length; j++) {
                list.innerHTML += '<li>' +
                    '<img src=' + data[j].imgurl + ">" +
                    "<h2>机型：" + data[j].name + "</h2>" +
                    "<h3>原价：" + data[j].price + '</h3>' +
                    "<span>现价：￥" + data[j].sale + "</span>" +
                    "<p>颜色：" + data[j].color + "</p>" +
                    "<p>销量：" + data[j].evaluate + "</p>" +
                    "<p>评价：" + data[j].sales + "</p>" +
                    '</li>';

            }

        }
    </script>
</body>

</html>